<template>
  <div class="home">
    <!-- <my-heard /> -->
    <div class="navs">
      <div class="nav-h">
        <div class="nav" @click="goChina()">
          <span>酒店</span>
          <span class="el-icon-s-home"></span>
        </div>
        <div class="nav" @click="goChina()">
          <span>景点玩乐</span>
          <span class="el-icon-s-promotion"></span>
        </div>
        <div class="nav" @click="goChina()">
          <span>美食</span>
          <span class="el-icon-fork-spoon"></span>
        </div>
        <div class="nav" @click="goTraveller()">
          <span>旅行者之家</span>
          <router-link to="/traveller"></router-link>
          <span class="el-icon-picture"></span>
        </div>
        <div class="nav">
          <span>更多</span>
          <span class="el-icon-more"></span>
        </div>
      </div>
    </div>
    <div class="banner">
      <div>
        <img src="img/lunbot.png" alt="" />
      </div>
      <!-- 搜索框 -->
      <div class="search">
        <form action="">
          <i class="el-icon-search"></i>
          <input
            id="input"
            v-model="kw"
            @keyup.enter="goDetail"
            type="text"
            placeholder="去哪儿?"
          />
        </form>
        <!-- 遮罩层 -->
        <!-- <form action="" class="dianji">
          <div class="zc">
            <i class="el-icon-search"></i>
            <input type="text" placeholder="去哪儿?" />
          </div>
          <div>
            <i class="el-icon-orange"></i>
            <input type="text" placeholder="全球旅行" />
          </div>
        </form> -->
      </div>
    </div>

    <history-record />
    <!-- 1楼 -->
    <index-floor />
    <!-- 2楼 -->
    <index-floorb />
    <!-- 3楼 -->
    <index-floorc />
    <div class="myfoottop">
      <div class="_liYwzxn3">
        <div class="_22L-pCeu">
          <div class="HeNejkG5">
            <img
              src="https://webresource.c-ctrip.com/NFES/ta-pc/1662375977675/_next/serverStatic/homepage/TC_logomark_solid_cream.svg"
              alt=""
            />
            <h2 class="_2KOXeTO5">旅行者之选</h2>
            <h2 class="_2KOXeTO5" style="margin-bottom: 64px">至尊奖</h2>
            <div>
              <div class="_3B-Kwnus">
                <a href="">查看获奖者</a>
              </div>
            </div>
          </div>
          <div class="_4img">
            <img
              src="https://static.tacdn.com/img2/brand/feed/tc_cards_tablet.jpeg"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
    <!-- <my-foot /> -->
  </div>
</template>

<script>
// @ is an alias to /src

import HistoryRecord from "@/components/HistoryRecord.vue";
import IndexFloor from "@/components/IndexFloor.vue";
import IndexFloorb from "@/components/IndexFloorb.vue";
import IndexFloorc from "@/components/IndexFloorc.vue";

export default {
  name: "HomeView",
  data() {
    return {
      kw: "",
    };
  },
  components: {
    HistoryRecord,
    IndexFloor,
    IndexFloorb,
    IndexFloorc,
  },
  methods: {
    goTraveller() {
      this.$router.push("/traveller");
    },
    goChina() {
      this.$router.push("/china");
    },
    goDetail() {
      this.$router.push(`/detail?${this.jid}`);
    },
  },
};
</script>
<style lang="scss" scoped>
*,
a {
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.navs {
  width: 1280px;
  margin: 0 auto;
  padding: 32px 24px;
  .nav-h {
    display: flex;
    justify-content: space-around;
    .nav {
      width: 210px;
      height: 50px;
      border: 1.5px solid #000;
      border-radius: 10px;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
      padding: 0 15px;
      span {
        font-size: 20px;
        font-weight: 500;
        align-self: center;
      }
      &:hover {
        background-color: #000;
        color: white;
      }
    }
  }
}
.banner {
  margin-bottom: 80px;
  img {
    width: 1280px;
    display: block;
    margin: 0 auto;
  }
  .search {
    position: relative;
    > form {
      background-color: white;
      position: absolute;
      width: 807px;
      height: 40px;
      //justify-self: center;
      top: -230px;
      left: 450px;
      outline: none;
      border-radius: 30px;
      box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
      padding: 12px 40px 12px 20px;
      > input {
        width: 701px;
        height: 100%;
        outline: none;
        border: none;
        font-size: 24px;
      }
      > i {
        font-size: 24px;
        margin-right: 12px;
      }
    }
  }
}
.myfoottop {
  background-color: #004f32;
  margin-bottom: 60px;
}
._liYwzxn3 {
  margin: 0 auto;
  width: 1280px;
  height: 577px;

  ._22L-pCeu {
    display: flex;
    flex-direction: row;

    .HeNejkG5 {
      display: flex;
      flex-direction: column;
      width: 256px;
      //垂直居中
      align-self: center;
      text-align: center;
      > img {
        display: block;
        width: 120px;
        margin: 0 auto 26px;
      }
      h2 {
        color: white;
        line-height: 45px;
        font-size: 36px;
      }
      ._3B-Kwnus {
        padding: 10px 16px;
        font-size: 16px;
        line-height: 20px;
        border-radius: 21px;
        background-color: black;
        width: 80px;
        margin: 0 auto;
        > a {
          color: white;
          font-size: 16px;
          font-weight: 700;
        }
      }
    }
    ._4img {
      width: 768px;
    }
  }
}
</style>
